<template>
    <div style="background:#f8f8f9">
        <div class="search">
            <label>登录名：</label>
            <i-input v-model="value" placeholder="请输入..." style="width: 200px" class="ipunts"></i-input>
            <i-button type="primary" shape="circle" icon="ios-search" @click="search">搜索</i-button>
        </div>
        <div class="action">
            <Button type="primary" icon="plus-round" @click="modal1 = true" style="text-aglin:center">新建</Button>
            <Button type="success" icon="wrench" @click="revise">修改</Button>
            <Button type="error" icon="trash-a" @click="deleted">删除</Button>
        </div>
        <div>
             <i-table  highlight-row border :columns="columns1" :data="data1" @on-selection-change="s=>{change2(s)}"></i-table>
        </div>
         <Page :total="1000" show-elevator class="page" @on-change="e=>{pageSearch(e)}"/> 
        <!-- 分页功能 -->
        <Modal v-model="modal1" title="新建用户">
            <Input v-model="username" placeholder="请输入用户名" clearable style="width: 200px" class="Modals"/>
            <Input v-model="mobile" placeholder="手机号" clearable style="width: 200px" class="Modals"/>
            <Input v-model="pasw" placeholder="密码" clearable style="width: 200px" class="Modals"/>
            <Input v-model="email" placeholder="邮箱" clearable style="width: 200px" class="Modals"/>
            <Input v-model="supasw" placeholder="确认密码" clearable style="width: 200px" class="Modals"/>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="define">确定</Button>
             </div>
        </Modal>

        <Modal v-model="modal2" title="修改用户信息" width="40%">
            <div class="box">
                <div><label>用户名:</label><Input disabled v-model="reviseUser.username" clearable style="width: 200px"/></div>
                <div><label>电&nbsp;&nbsp;&nbsp;话:</label><Input v-model="reviseUser.mobile" clearable style="width: 200px"/></div>
                <div><label>密&nbsp;&nbsp;&nbsp;码:</label><Input v-model="reviseUser.pasw" clearable style="width: 200px"/></div>
                <div><label>邮&nbsp;&nbsp;&nbsp;箱:</label> <Input v-model="reviseUser.email" clearable style="width: 200px"/></div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="reviseUserInfo">确定</Button>
             </div>
        </Modal>
    </div>
</template>
<script>
export default {
    name:"user",
    data(){
        return{
            modal1: false, //控制新增用户对话框的属性
            modal2: false, //控制修改用户对话框的属性
            // ------------新增用户的实体类--------------------
            username:"",
            mobile:"",
            pasw:"",
            email:"",
            supasw:"",
            // ------------新增用户的实体类--------------------
            // ------------定义修改数据的实体类----------------
            reviseUser:{   
                username:"",
                mobile:"",
                pasw:"",
                email:"",
                updatTime:""
            },
            // ------------定义修改数据的实体类----------------
            columns1: [    ///表格表头的数据
                    {type: 'selection',width: 60,align: 'center'},
                    {title: '姓名',key: 'username',align: 'center'},
                    {title: '邮箱',key: 'email',align: 'center'},
                    {title: '电话',key: 'phone',align: 'center'}
            ],
            reviseArray : [], //定义选择用户的临时数组
            data1: [],        //获取用户数的数据存在这个数组里面
            selectnum : 0,   //定义选择的数据量===用于判断
            value:"",        //定义用于进行搜索的值
            limit : 0 
        }
    },
    created(){
        this.getUserlist()
    },
    methods:{
            define(){
                let data = {
                    username:this.username,
                    mobile:this.mobile,
                    pasw:this.pasw,
                    supasw:this.supasw,
                    email:this.email
                }
                if(!data.username || !data.pasw || !data.supasw){
                    this.$Notice.open({
                        title: '请输入必填项!'
                    })
                    return;
                }
                if(data.pasw != data.supasw){
                    this.$Notice.open({
                        title: '密码和确认密码不一致'
                    })
                    return;
                }
                if(data.mobile.length != 11){
                    this.$Notice.open({
                        title: '手机格式不正确'
                    })
                    return;
                }
                //调用新增用户的接口
                this.$http({
                    method:'post',
                    url:this.$util.baseUrl+'users/adduser',
                    data:data
                }).then((res) => {     
                   if(res.data.code == "800003"){
                        this.$Notice.open({
                            title: res.data.mess
                        })
                   }else{
                       if(res.data.code == "800000"){
                          this.$Notice.open({
                            title: res.data.mess
                          })
                            this.username = ""
                            this.mobile = ""
                            this.pasw = ""
                            this.supasw = "" 
                            this.email = ""
                            this.getUserlist()
                      }
                   }
                }).then((err) => {
                    console.log(err);
                })
            },
            cancel(){
                this.$Message.info('点击了取消');
                this.modal1 = false
                this.modal2 = false
            },
            getUserlist(){
                let data = {
                    limit : this.limit,
                    number : 8
                }
                //获取当前所有的用户数
                this.$http({
                    method:"post",
                    url:this.$util.baseUrl+'users/getuserlist',
                    data:data
                }).then((res)=>{
                    if(res.data.code == "800000"){
                       this.data1 = res.data.data
                    }
                })
            },
            revise(){
                if(this.selectnum<1 || this.selectnum>1){
                    this.$Message.warning('请至少选择一项(且只能选择一项)'); 
                    return;
                }
                //给修改用户的实体类赋值
                this.reviseUser.username = this.reviseArray[0].username
                this.reviseUser.pasw = this.reviseArray[0].password
                this.reviseUser.email = this.reviseArray[0].email
                this.reviseUser.mobile = this.reviseArray[0].phone
                this.modal2 = true
            },
             change2(e){
                this.selectnum = e.length
                this.reviseArray = e
            },
            //提交修改信息的时候
            reviseUserInfo(){
                let data = this.reviseUser
                this.$http({
                    method:"post",
                    url:this.$util.baseUrl+'users/updateUserinfo',
                    data:data
                }).then((res)=>{
                   if(res.data.code == "800000"){
                        this.$Notice.open({
                            title: res.data.mess
                        })
                   }
                }).then((err) => {
                    console.log(err);
                })
            },
            deleted(){
                //删除某条用户数据
                let data = this.reviseArray;
                let tempArr  = []
                for(let i=0;i<data.length;i++){
                    tempArr.push(data[i].id)
                }
                let tempdata = {
                    value:tempArr
                }
                this.$http({
                    method:"post",
                    url:this.$util.baseUrl+'users/deleteUser',
                    data:tempdata
                }).then((res)=>{
                    //删除成功之后的操作
                   if(res.data.code == "800000"){
                        this.$Notice.open({
                            title: res.data.mess
                        })
                        this.getUserlist()
                   }
                }).then((err) => {
                    console.log(err);
                })
            },
            search(){
                //对用户进行搜索 ----》输入用户名
                let data = {
                    username:this.value
                }
                this.$http({
                    method:"post",
                    url:this.$util.baseUrl+'users/searchUser',
                    data:data   
                }).then((res)=>{
                    if(res.data.code == "800000"){
                        this.$Notice.open({
                            title: res.data.mess
                        })
                    this.data1 = res.data.data  
                    }
                })
            },
            pageSearch(e){
                this.limit = (e-1)*8
                this.getUserlist();
            }
    }
}
</script>
<style lang="less" scoped>
    .search{
        width: 100vw;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        label{
            margin-left: 20px;
            margin-right: 20px;
            font-size: 20px;
        }
        .ipunts{
            margin-right: 90px;
        }
    }
    .action{
        width: 100vw;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        Button{
            margin-left: 10px;
            margin-right: 10px;
        }
    }
    .Modals{
        margin-bottom: 30px;
        margin-right: 30px;
    }
    .box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }
    .box>div{
        margin-bottom: 30px;
        margin-right: 30px;
    }
    .box>div>label{
        display: inline-block;
        width: 60px;
    }
    .page{
        height: 50px;
        margin-left: 900px;
        margin-top: 30px;
    }
</style>